<template>
  <button 
    :class="['custom-button', variant, { 'has-icon': $slots.icon }]"
    @click="$emit('click', $event)"
  >
    <span v-if="$slots.icon" class="button-icon">
      <slot name="icon"></slot>
    </span>
    <span v-if="$slots.default" class="button-content">
      <slot></slot>
    </span>
  </button>
</template>

<script setup lang="ts">
interface Props {
  variant?: 'primary' | 'secondary' | 'text' | 'outline'
  size?: 'small' | 'medium' | 'large'
}

withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'medium'
})

defineEmits<{
  click: [event: MouseEvent]
}>()
</script>

<style scoped>
.custom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: var(--devui-text-primary, #1e293b);
}

.custom-button.primary {
  background: var(--devui-brand, #3b82f6);
  color: white;
}

.custom-button.primary:hover {
  background: #2563eb;
}

.custom-button.secondary {
  background: #f3f4f6;
  color: var(--devui-text-primary, #1e293b);
}

.custom-button.secondary:hover {
  background: #e5e7eb;
}

.custom-button.text {
  background: transparent;
  color: var(--devui-text-regular, #6b7280);
  padding: 4px 8px;
}

.custom-button.text:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--devui-text-primary, #1e293b);
}

.custom-button.outline {
  background: transparent;
  border: 1px solid var(--devui-dividing-line, #e5e7eb);
  color: var(--devui-text-primary, #1e293b);
}

.custom-button.outline:hover {
  border-color: var(--devui-brand, #3b82f6);
  color: var(--devui-brand, #3b82f6);
}

.custom-button.small {
  padding: 4px 12px;
  font-size: 12px;
}

.custom-button.large {
  padding: 12px 24px;
  font-size: 16px;
}

.button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-content {
  display: flex;
  align-items: center;
}
</style>
